<template>
  <page-header-wrapper>
    <a-card>
      <template>
        <p>短信设置用于用户下单时，给指定手机号发送短信通知</p>
        <a-row :gutter="[16,30]" type="flex" align="middle">
          <a-col class="required" :span="4" style="text-align: right;">
            开启短信提醒：
          </a-col>
          <a-col :span="16">
            <a-radio-group @change="changeRadio(1, $event)" v-model="params.status">
              <a-radio :value="'1'">
                开启
              </a-radio>
              <a-radio :value="'0'">
                关闭
              </a-radio>
            </a-radio-group>
          </a-col>
        </a-row>
        <a-row :gutter="[16,30]" type="flex" align="middle">
          <a-col class="required" :span="4" style="text-align: right;">
            是否通知入驻商：
          </a-col>
          <a-col :span="16">
            <a-radio-group @change="changeRadio(2, $event)" v-model="params.is_notice">
              <a-radio :value="'1'">
                是
              </a-radio>
              <a-radio :value="'0'">
                否
              </a-radio>
            </a-radio-group>
          </a-col>
        </a-row>
        <a-row :gutter="[16,30]" type="flex" align="middle">
          <a-col class="required" :span="4" style="text-align: right;">
            是否通知供货商：
          </a-col>
          <a-col :span="16">
            <a-radio-group @change="changeRadio(3, $event)" v-model="params.is_notice_supplier">
              <a-radio :value="'1'">
                是
              </a-radio>
              <a-radio :value="'0'">
                否
              </a-radio>
            </a-radio-group>
          </a-col>
        </a-row>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            阿里云AccessKeyId：
          </a-col>
          <a-input
            class="input-class"
            v-model="params.AccessKeyId"
          />
        </a-row>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            阿里云AccessKeySecret：
          </a-col>
          <a-input
            class="input-class"
            v-model="params.AccessKeySecret"
          />
        </a-row>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            模板签名：
          </a-col>
          <a-input
            class="input-class"
            v-model="params.sign"
          />
        </a-row>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            接收短信手机号：
          </a-col>
          <a-input
            class="input-class"
            v-model="params.mobile"
          />
          <a-col>多个请使用英文逗号<code>,</code>分隔</a-col>
        </a-row>
        <a-divider orientation="left">订单下单提醒</a-divider>
        <p>例如：模板内容:您有一条新的订单，订单号：89757，请登录商城后台查看。 </p>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            模板名称：
          </a-col>
          <a-input
            class="input-class"
            v-model="params.name"
          />
        </a-row>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            模板ID：
          </a-col>
          <a-input
            class="input-class"
            v-model="params.tpl"
          />
        </a-row>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            模板变量：
          </a-col>
          <a-input
            class="input-class"
            v-model="params.msg"
          />
        </a-row>
        <p style="position: relative;top:-10px;left: 11.5rem;"><span style="font-size: 8px;">例如：模板内容: 您有一个新的订单，订单号：${order}，则只需填写order</span></p>
        <p style="position: relative;top:-10px;left: 11.5rem;"><span style="font-size: 8px;">注意：目前只支持设置订单号</span></p>
        <a-divider orientation="left">订单退款提醒</a-divider>
        <p style="position: relative;top:-10px;left: 11.5rem;">例如：模板内容:您有一条新的退款订单，请登录商城后台查看。</p>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            模板名称：
          </a-col>
          <a-input
            class="input-class"
            v-model="refund.name"
          />
        </a-row>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            模板ID：
          </a-col>
          <a-input
            class="input-class"
            v-model="refund.tpl"
          />
        </a-row>
        <a-divider orientation="left">发送手机验证码</a-divider>
        <p style="position: relative;top:-10px;left: 11.5rem;">例如：模板内容:您的验证码为89757，请勿告知他人。</p>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            模板名称：
          </a-col>
          <a-input
            class="input-class"
            v-model="code.name"
          />
        </a-row>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            模板ID：
          </a-col>
          <a-input
            class="input-class"
            v-model="code.tpl"
          />
        </a-row>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            模板变量：
          </a-col>
          <a-input
            class="input-class"
            v-model="code.msg"
          />
        </a-row>
        <p style="position: relative;top:-10px;left: 11.5rem;"><span style="font-size: 8px;">例如：模板内容: 您的验证码为${code}，请勿告知他人。，则只需填写code</span></p>
        <a-divider orientation="left">发送配送订单提醒</a-divider>
        <p style="position: relative;top:-10px;left: 11.5rem;">例如：模板内容:你有新的配送订单需要配送，订单号：${order}。</p>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            模板名称：
          </a-col>
          <a-input
            class="input-class"
            v-model="peisong.name"
          />
        </a-row>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            模板ID：
          </a-col>
          <a-input
            class="input-class"
            v-model="peisong.tpl"
          />
        </a-row>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            模板变量：
          </a-col>
          <a-input
            class="input-class"
            v-model="peisong.msg"
          />
        </a-row>
        <p style="position: relative;top:-10px;left: 11.5rem;"><span style="font-size: 8px;">例如：模板内容:你有新的配送订单需要配送，订单号：${order}。，则只需填写order</span></p>
        <a-divider orientation="left">发送入驻商审核结果通知</a-divider>
        <p style="position: relative;top:-10px;left: 11.5rem;">例如：模板内容:您的店铺审核结果为：${result}。</p>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            模板名称：
          </a-col>
          <a-input
            class="input-class"
            v-model="shop.name"
          />
        </a-row>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            模板ID：
          </a-col>
          <a-input
            class="input-class"
            v-model="shop.tpl"
          />
        </a-row>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            模板变量(审核状态)：
          </a-col>
          <a-input
            class="input-class"
            v-model="shop.status"
          />
        </a-row>
        <p style="position: relative;top:-10px;left: 11.5rem;"><span style="font-size: 8px;">例如：模板内容:您的店铺审核状态为：${status}。则只需填写status</span></p>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            模板变量(审核结果)：
          </a-col>
          <a-input
            class="input-class"
            v-model="shop.msg"
          />
        </a-row>
        <p style="position: relative;top:-10px;left: 11.5rem;"><span style="font-size: 8px;">此处填写审核结果，例如：result</span></p>
        <a-row :gutter="[30,30]" type="flex" align="middle">
          <a-col offset="5">
            <a-button type="primary" @click="onSave">
              保存
            </a-button>
          </a-col>
        </a-row>
      </template>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getSmsConfig, setSmsConfig } from '@/api/setting/sms'

export default {
  name: 'SmsConfig',
  components: {
  },
  data () {
    return {
      shop: {
        name: null,
        tpl: null,
        status: null,
        msg: null
      },
      code: {
        name: null,
        tpl: null,
        msg: null
      },
      peisong: {
        name: null,
        tpl: null,
        msg: null
      },
      refund: {
        name: null,
        tpl: null,
        msg: null
      },
      params: {
        status: null,
        is_notice: null,
        is_notice_supplier: null,
        AccessKeyId: null,
        AccessKeySecret: null,
        sign: null,
        mobile: null,
        name: null,
        tpl: null,
        msg: null
      }
    }
  },
  created () {
    this.getData()
    console.log(this.params)
  },
  methods: {
    changeRadio (type, e) {
      if (type === 1) {
        this.params.status = e.target.value
      }
      if (type === 2) {
        this.params.is_notice = e.target.value
      }
      if (type === 3) {
        this.params.is_notice_supplier = e.target.value
      }
    },
    onSave () {
      var config = {
        status: this.params.status,
        is_notice: this.params.is_notice,
        is_notice_supplier: this.params.is_notice_supplier,
        AccessKeyId: this.params.AccessKeyId,
        AccessKeySecret: this.params.AccessKeySecret,
        sign: this.params.sign,
        mobile: this.params.mobile,
        name: this.params.name,
        tpl: this.params.tpl,
        msg: this.params.msg,
        code: this.code,
        refund: this.refund,
        shop: this.shop,
        peisong: this.peisong
      }
      const hide = this.$message.loading('提交中', 0)
      setSmsConfig(config).then(res => {
        hide()
        if (res.code !== 0) {
          this.$error({
            content: res.msg
          })
        } else {
          this.$message.success('保存成功！')
        }
      })
    },
    getData: async function () {
      getSmsConfig({}).then(res => {
        const data = res.data
        this.refund = data.refund
        this.code = data.code
        this.shop = data.shop
        this.peisong = data.peisong
        this.params = data.sms
      })
    }
  }
}
</script>
<style lang="less" scoped>
.required::before {
  content: '*';
  color: red;
}
.input-class {
  width: 500px;
  margin: 10px 8px 25px 0;
}
</style>
